<template>
	<!-- 登录 -->
	<view class="container flex-items-plus flex-column">
		<view class="iphoneNum-box flex-row-plus flex-items">
			<view>
				<input v-model="loginQuery.account" placeholder-class="iphoneNum-input" type="number" maxlength='11'
					placeholder="请输入您的手机号" />
			</view>
		</view>
		<view class="flex-row-plus">
			<view class="code-box">
				<view>
					<input v-model="VerifyQuery.code" :maxlength="4" placeholder-class="codeNum-input"
						placeholder="请输入图片验证码" />
				</view>
			</view>
			<view class="getcode">
				<image v-if="captcha" :src="captcha" mode="" @click="loadImage"></image>
			</view>
		</view>
		<view class="flex-row-plus">
			<view class="code-box">
				<view>
					<input v-model="loginQuery.code" :maxlength="4" placeholder-class="codeNum-input"
						placeholder="请输入验证码" />
				</view>
			</view>
			<view :class="disabled === true ? 'on' : ''" :disabled="disabled" class="getcode" @click="codede">
				{{ text }}
			</view>
		</view>
		<view class="pwd-box flex-row-plus flex-items">
			<view>
				<input v-model="loginQuery.pwd" type="password" :maxlength="12" placeholder-class="passwordNum-input"
					placeholder="请输入登录密码" />
			</view>
		</view>
		<view class="pwd-box flex-row-plus flex-items">
			<view>
				<input v-model="loginQuery.pwdConfirm" type="password" :maxlength="12" placeholder-class="passwordNum-input"
					placeholder="再次输入登录密码" />
			</view>
		</view>
		<view class="mar-top-60">
			<submit-button width="650rpx" class="mar-top-100 fs26" text="重置密码" @submitEvent="resetPwd"></submit-button>
		</view>
	</view>
</template>
<script setup>
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";
	import {
		ref
	} from 'vue';
	import {
		request
	} from '../../utils/request';
	import API from '../../config/api';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		btnUseLoading
	} from '../../hooks/bntUseLoading'
	
	const {
		btnShowLoading,
		btnHideLoading
	} = btnUseLoading()
	const loginQuery = ref({
		account: '',
		code: '',
		salesId: '',
		pwd: '',
		pwdConfirm: '',
	});

	const VerifyQuery = ref({
		phone: '',
		code: '',
	});
	const activeTab = ref(1)
	const disabled = ref(false)
	const text = ref('获取验证码')
	let captcha = ref('')
	onLoad((options) => {
		captcha.value = API.GetCaptcha
	})

	const loadImage = () => {
		captcha.value = API.GetCaptcha + '?' + Math.random()
	}
	const resetPwd = async () => {
		let phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
		if (loginQuery.value.account == '') {
			uni.showToast({
				title: '请输入手机号！',
				duration: 2000,
				icon: 'none'
			});
		} else if (!phoneCodeVerification.test(loginQuery.value.account)) {
			uni.showToast({
				title: '请输入正确的手机号！',
				duration: 2000,
				icon: 'none'
			});
		} else if (loginQuery.value.pwd != loginQuery.value.pwdConfirm) {
			uni.showToast({
				title: '两次密码不一致！',
				duration: 2000,
				icon: 'none'
			});
		} else {
			btnShowLoading()
			try {
				const res = await request(API.resetPwd, {
					phone: loginQuery.value.account,
					verificationCode: loginQuery.value.code,
					newPassword: loginQuery.value.pwd,
				}, 'POST')
				uni.hideLoading()
				uni.navigateBack({
					delta: 1
				})
			
			} catch (error) {
				uni.hideLoading()
				uni.showToast({
					title: res.data.message,
					duration: 2000,
					icon: 'none',
				});
				throw new Error(error)
			} finally {
				btnHideLoading()
			}
		}
	}

	// 获取验证码
	const codede = () => {
		if (disabled.value) return
		getVerify()
	}
	const getVerify = async () => {
		let phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
		if (loginQuery.value.account == '') {
			uni.showToast({
				title: '请输入手机号！',
				duration: 2000,
				icon: 'none'
			});
		} else if (!phoneCodeVerification.test(loginQuery.value.account)) {
			uni.showToast({
				title: '请输入正确的手机号！',
				duration: 2000,
				icon: 'none'
			});
		} else {
			if (!VerifyQuery.value.code) return uni.showToast({
				title: '请输入图片验证码！',
				duration: 2000,
				icon: 'none'
			});
			VerifyQuery.value.phone = loginQuery.value.account
			try {
				const res = await request(API.Verify, {
					code: VerifyQuery.value.code,
					phone: VerifyQuery.value.phone,
				}, 'GET');
				sendCode();
			} catch (error) {
				uni.showToast({
					title: error.data.message,
					duration: 1000,
					icon: 'none'
				});
			}
		}
	}

	const sendCode = () => {
		if (disabled.value) return
		disabled.value = true
		let n = 60
		text.value = '剩余 ' + n + 's'
		const run = setInterval(() => {
			n = n - 1
			if (n < 0) {
				clearInterval(run)
			}
			text.value = '剩余 ' + n + 's'
			if (text.value < '剩余 ' + 0 + 's') {
				disabled.value = false
				text.value = '重新获取'
			}
		}, 1000)
	}
</script>
<style lang="scss">
	.container {
		background-color: #FFFFFF;
		height: 100%;

		.login-logoBox {
			margin-top: 150rpx;

			.login-logo {
				width: 234rpx;
				height: 234rpx;
			}
		}

		.pwd-box {
			margin-top: 10rpx;
			border-bottom: 1rpx solid #DDDDDD;
			height: 100rpx;
			width: 600rpx;

			.pwdIcon {
				width: 50rpx;
				height: 63rpx;
			}

			.passwordNum-input {
				color: #999999;
				font-size: 28rpx;
				font-weight: 400;
				width: 346rpx;
			}
		}

		.iphoneNum-box {
			margin-top: 30rpx;
			border-bottom: 1rpx solid #DDDDDD;
			height: 100rpx;
			width: 600rpx;

			.loginIcon {
				width: 40rpx;
				height: 53rpx;
			}

			.iphoneNum-input {
				color: #999999;
				font-size: 28rpx;
				font-weight: 400;
			}
		}

		.code-box {
			border-bottom: 1rpx solid #DDDDDD;
			height: 100rpx;
			width: 360rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.loginIcon {
				width: 44rpx;
				height: 50rpx;
			}

			.code-lab {
				width: 200rpx;
			}

			.codeNum-input {
				color: #999999;
				font-size: 28rpx;
				font-weight: 400;
			}
		}

		.getcode {
			// background-color: #C5AA7B;
			height: 100rpx;
			width: 230rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-left: 20rpx;
			color: #212121;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.registerBut {
			background: #333333;
			color: #FFEBC4;
			height: 100rpx;
			width: 600rpx;
			text-align: center;
			line-height: 100rpx;
			margin-top: 30rpx;
		}

		.loginType {
			width: 100%;
			height: auto;
			display: flex;
			padding: 0 100rpx;
			flex-direction: row;
			justify-content: space-between;
			text-align: center;

			&:first-child {
				margin-right: 30rpx;
			}

			label {
				flex: 1;
				font-size: 34rpx;
				font-weight: 400;
				color: #ccc;

				&.on {
					color: #000;
				}
			}
		}
	}
</style>